# 前言

通过前面的小节，我们知道，组件的渲染成 vnode 的过程，其实就是组件的 render 函数调用执行的结果。但是我们写 Vue 项目时，经常会使用 <template> 的模版式写法，很少使用 render 函数的写法，那么 Vue 是如何实现从 模版 转成 render 函数的呢？

另外，关于模版编译成 render 函数的结果，也可以通过官方提供的模版导出工具现在调试编译结果。

Vue3 的核心编译源码文件在 packages/compiler-dom/src/index.ts 中：

function compile(template, options = {}) {
  return baseCompile(template, extend({}, parserOptions, options, {
    nodeTransforms: [...DOMNodeTransforms, ...(options.nodeTransforms || [])],
    directiveTransforms: extend({}, DOMDirectiveTransforms, options.directiveTransforms || {}),
    transformHoist:  null
  }))
}

@前端进阶之旅: 代码已经复制到剪贴板

其核心调用的就是 baseCompile 函数，接下来一起看一下 baseCompile 的实现：

arduino
复制代码export function baseCompile(template, options = {}) {
  // 如果是字符串模版，则直接进行解析，转成 AST
  const ast = isString(template) ? baseParse(template, options) : template
  const [nodeTransforms, directiveTransforms] =
    getBaseTransformPreset(prefixIdentifiers)

  // AST 转换成 JS AST
  transform(
    ast,
    extend({}, options, {
      prefixIdentifiers,
      nodeTransforms: [
        ...nodeTransforms,
        ...(options.nodeTransforms || []) // user transforms
      ],
      directiveTransforms: extend(
        {},
        directiveTransforms,
        options.directiveTransforms || {} // user transforms
      )
    })
  )

  // JS AST 生成代码
  return generate(
    ast,
    extend({}, options, {
      prefixIdentifiers
    })
  )
}

@前端进阶之旅: 代码已经复制到剪贴板

可以看到 baseCompile 函数核心就只有 3 步：

对 template 模版进行词法和语法分析，生成 AST
AST 转换成附有 JS 语义的 JavaScript AST
解析 JavaScript AST 生成代码

本小节着重来介绍下第一步

# 解析 `template` 生成 `AST`

一个简单的模版如下：

html
复制代码<template>
  <!-- 这是一段注释 -->
  <p>{{ msg }}</p>
</template>

@前端进阶之旅: 代码已经复制到剪贴板

这个模版经过 baseParse 后转成的 AST 结果如下：

json
复制代码{
  "type": 0,
  "children": [
    {
      "type": 3,
      "content": " 这是一段注释 ",
      "loc": {
        "start": {
          "column": 3,
          "line": 2,
          "offset": 3
        },
        "end": {
          "column": 18,
          "line": 2,
          "offset": 18
        },
        "source": "<!-- 这是一段注释 -->"
      }
    },
    {
      "type": 1,
      "ns": 0,
      "tag": "p",
      "tagType": 0,
      "props": [],
      "isSelfClosing": false,
      "children": [
        {
          "type": 5,
          "content": {
            "type": 4,
            "isStatic": false,
            "constType": 0,
            "content": "msg",
            "loc": {
              "start": {
                "column": 9,
                "line": 3,
                "offset": 27
              },
              "end": {
                "column": 12,
                "line": 3,
                "offset": 30
              },
              "source": "msg"
            }
          },
          "loc": {
            "start": {
              "column": 6,
              "line": 3,
              "offset": 24
            },
            "end": {
              "column": 15,
              "line": 3,
              "offset": 33
            },
            "source": "{{ msg }}"
          }
        }
      ],
      "loc": {
        "start": {
          "column": 3,
          "line": 3,
          "offset": 21
        },
        "end": {
          "column": 19,
          "line": 3,
          "offset": 37
        },
        "source": "<p>{{ msg }}</p>"
      }
    }
  ],
  "helpers": [],
  "components": [],
  "directives": [],
  "hoists": [],
  "imports": [],
  "cached": 0,
  "temps": 0,
  "loc": {
    "start": {
      "column": 1,
      "line": 1,
      "offset": 0
    },
    "end": {
      "column": 1,
      "line": 4,
      "offset": 38
    },
    "source": "\n  <!-- 这是一段注释 -->\n  <p>{{ msg }}</p>\n"
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

其中有一个 type 字段，用来标记 AST 节点的类型，这里涉及到的枚举如下：

export const enum NodeTypes {
  ROOT, // 0 根节点
  ELEMENT, // 1 元素节点
  TEXT, // 2 文本节点
  COMMENT, // 3 注释节点
  SIMPLE_EXPRESSION, // 4 表达式
  INTERPOLATION, // 5 插值节点
  // ...
}

@前端进阶之旅: 代码已经复制到剪贴板

另外，props 描述的是节点的属性，loc 代表的是节点对应的代码相关信息，包括代码的起始位置等等。

有了上面的一些基础知识，我们来看看生成 AST 的核心算法：

export function baseParse(content, options) {
  // 创建解析上下文
  const context = createParserContext(content, options)
  // 获取起点位置
  const start = getCursor(context)
  // 创建 AST
  return createRoot(
    parseChildren(context, TextModes.DATA, []),
    getSelection(context, start)
  )
}

@前端进阶之旅: 代码已经复制到剪贴板

其中创建解析上下文得到的 context 的过程：

function createParserContext(content, options) {
  return {
    options: extend({}, defaultParserOptions, options),
    column: 1,
    line: 1,
    offset: 0,
    // 存储原始模版内容
    originalSource: content,
    source: content,
    inPre: false,
    inVPre: false
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

createParserContext 本质就是返回了一个 context 对象，用来标记解析过程中的上下文内容。

接下来我们核心需要分析的是 parseChildren 函数，该函数是生成 AST 的核心函数。通过函数调用我们大致清楚该函数传入了初始化生成的 context 对象，context 对象中包含我们初始的模版内容，存储在 originalSource 和 source 中。

先来看看 parseChildren 对节点内容解析的过程：

上述代码量虽然挺多，但整体要做的事情还是比较明确和清晰的。从上述代码中可以看到，Vue 在解析模板字符串时，可分为两种情况：以 < 开头的字符串和不以 < 开头的字符串。

其中，不以 < 开头的字符串有两种情况：它是文本节点或 {{ exp }} 插值表达式。

而以 < 开头的字符串又分为以下几种情况：

元素开始标签，比如 <div>
注释节点 
文档声明 <!DOCTYPE html>
纯文本标签 <![CDATA[<]]>

接下来我们介绍几个比较重要的解析器。

# 1. 解析插值

根据前面的描述，我们知道当遇到字符串 {{msg}} 的时候，会把当前代码当做是插值节点来解析，进入 parseInterpolation 函数体内：

这里大量使用了一个重要函数 advanceBy(context, numberOfCharacters)。其功能是更新解析上下文 context 中的 source 来移动代码解析的位置，同时更新 offset、line、column 等和代码位置相关的属性，这样来达到一步步蚕食模版字符串的目的，从而达到对整个模版字符chuancontext 是字符串的上下文对象，numberOfCharacters 是要前进的字符数。

针对这样一段代码：

html
复制代码<div>{{ msg }}<div>

@前端进阶之旅: 代码已经复制到剪贴板

调用 advance(s, 14) 函数，得到结果：

可以看到，parseInterpolation 函数本质就是通过插值的开始标签{{ 和结束标签 }} 找到插值的内容 content。然后再计算插值的起始位置，接着就是前进代码到插值结束分隔符后，表示插值部分代码处理完毕，可以继续解析后续代码了。

最后返回一个描述插值节点的 AST 对象，其中，loc 记录了插值的代码开头和结束的位置信息，type 表示当前节点的类型，content 表示当前节点的内容信息。

# 2. 解析文本

针对源代码起点位置的字符不是 < 或者 {{ 时，则当做是文本节点处理，调用 parseText 函数：

parseText 函数整体功能还是比较简单的，如果一段文本，在 CDATA 模式下，当遇到 ]]> 即为结束位置，否则，都是在遇到 < 或者插值分隔符 {{ 结束。所以通过遍历这些结束符，匹配并找到文本结束的位置。

找到文本结束位置后，就可以通过 parseTextData 函数来获取到文本的内容并前进到文本内容后。

最后返回一个文本节点的 AST 对象。

# 3. 解析节点

当起点字符是 < 开头，且后续字符串匹配 /[a-z]/i 正则表达式，则会进入 parseElement 的节点解析函数：

可以看到，parseElement 主要做了三件事情：解析开始标签，解析子节点，解析闭合标签。

举个例子：

html
复制代码<div class="app">
  <p>{{ msg }}</p>
  一个文本节点
</div>

@前端进阶之旅: 代码已经复制到剪贴板

# 总结

我们来演示一下创建过程：

# 前言

# 解析 template 生成 AST

# 1. 解析插值

# 2. 解析文本

# 3. 解析节点

# 总结

# 解析 `template` 生成 `AST`

编译器-模板是如何被编译成 AST 的|Vue3原理

编译器-模板是如何被编译成 AST 的|Vue3原理